/** @define ButtonGroup; use strict */

@import 'suitcss-components-button-group';
@import 'suitcss-components-button-group/button-group.plugin.css';

:root {
  /* Set our vars in correct format */
  --ButtonGroup-font-size: 1rem;
  --ButtonGroup-button-border-width: 0;
  /* From suitcss-components-button-group */
  --font-size-ButtonGroup: var(--ButtonGroup-font-size);
  --border-width-Button: var(--ButtonGroup-button-border-width);
}

/* Need to stick to this naming convention (against suitcss) so that it does
not conflict with the other frontend code
 */

.ButtonGroup--hz > .ButtonGroup-item {
  vertical-align: middle;
}

.ButtonGroup--round .ButtonGroup-item:first-child .EditorButton {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.ButtonGroup--round .ButtonGroup-item:last-child .EditorButton {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  padding-right: 1rem;
}

.ButtonGroup-item:first-child button {
  padding-left: 1rem;
  padding-right: 2rem;
}

button.EditorButton.Button--small.u-rounded.Button--primary.u-sizeWidth-6 {
  padding-left: 1.3rem;
}

ul.EditorDropdown-content li button.EditorButton {
  padding-left: 1rem;
}

.ButtonGroup--borderCollapse.ButtonGroup--hz > .ButtonGroup-item {
  margin-right: 0;
}

.ButtonGroup-item:first-child button.Button--neutral.is-disabled {
  padding-right: 1rem !important;
}
